<template>
    <header ref="header" class="bg-white dark:bg-gray-800 shadow-sm ">
        <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
            <router-link to="/" class="flex items-center space-x-2">
                <img src="@/assets/logo.jpg" class="w-8 h-8" alt="LOGO" />
                <span class="text-xl font-bold dark:text-white">ROBIN BLOG</span>
            </router-link>

            <div class="hidden md:flex space-x-6">
                <router-link v-for="(item, index) in navItems" :key="index" :to="item.path"
                    class="px-3 py-2 rounded-md transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
                    active-class="bg-gray-100 dark:bg-gray-700">
                    {{ item.title }}
                </router-link>
            </div>

            <div class="flex items-center space-x-4">
                <button @click="toggleDarkMode" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
                    <span class="dark:hidden">🌙</span>
                    <span class="hidden dark:inline">☀️</span>
                </button>
                <button class="md:hidden p-2" @click="isMobileMenuOpen = !isMobileMenuOpen">
                    ☰
                </button>
            </div>
        </nav>

        <!-- 移动端菜单 -->
        <div v-show="isMobileMenuOpen" class="md:hidden absolute w-full bg-white dark:bg-gray-800 shadow-lg">
            <router-link v-for="(item, index) in navItems" :key="index" :to="item.path"
                class="block px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700"
                active-class="bg-gray-100 dark:bg-gray-700" @click="isMobileMenuOpen = false">
                {{ item.title }}
            </router-link>
        </div>
    </header>
</template>

<script setup lang="ts">
import { ref,onMounted,onUnmounted } from 'vue'
import { useThemeStore } from '@/store/theme'

const themeStore = useThemeStore()
const isMobileMenuOpen = ref(false)

const navItems = [
    { title: '随机挑战', path: '/' },
    { title: '博客', path: '/categories' },
    { title: '精彩回放', path: '/tags' },
    { title: '日程', path: '/about' },
]

const toggleDarkMode = () => {
    themeStore.toggleDarkMode()
    document.documentElement.classList.toggle('dark', themeStore.isDark)
}

const header = ref(null);

const sidebar=document.getElementById('sidebar')

const handleScroll = () => {
  if (header.value) {
    const headerHeight = header.value.offsetHeight;
    if (window.scrollY > 4*headerHeight) {
      header.value.classList.add('fixed', 'top-0', 'left-0', 'right-0', 'z-10');
      if(sidebar){
        sidebar.classList.add('mt-16')
      }
    } else {
      header.value.classList.remove('fixed', 'top-0', 'left-0', 'right-0', 'z-10');
      if(sidebar){
        sidebar.classList.remove('mt-16')
      }
    }
  }
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>